let React = require('react');

let Account = require('../components/account');
let Tabs = require('../components/tabs');
let Tool = require('../components/tools');

// tools object , you can get it by ajax or other ways.
let tools = [
	{
		parent: {name: 'pencil', text: '铅笔类', icon: 'fa fa-pencil'},
		sub: [
			{name: 'pencil1', text: '铅笔1号', icon: 'fa fa-pencil'},
			{name: 'pencil2', text: '铅笔2号', icon: 'fa fa-pencil'},
		]
	},
	{
		parent: {name: 'line', text: '线条类', icon: 'fa fa-minus'},
		sub: [
			{name: 'line1', text: '线条1号', icon: 'fa fa-minus'},
			{name: 'line2', text: '线条2号', icon: 'fa fa-minus'},
		]
	},
	{
		parent: {name: 'circle', text: '圆类', icon: 'fa fa-circle-o'},
		sub: [
			{name: 'circle1', text: '圆1号', icon: 'fa fa-circle-o'},
			{name: 'circle2', text: '圆2号', icon: 'fa fa-circle-o'},
		]
	},
	{
		parent: {name: 'text', text: '文字类', icon: 'fa fa-file-text'},
		sub: [
			{name: 'text1', text: '文字1号', icon: 'fa fa-file-text'},
			{name: 'text2', text: '文字2号', icon: 'fa fa-file-text'},
		]
	},
];

let Home = React.createClass({
	getInitialState(){
		return{
			isRightMenuHide: false,
			isLeftMenuHide: false,
			toolActived: {parent: null, sub: null},
		};
	},
	_handleToolsChange(tool){
		this._onActive(tool);

		/*
			Add some functions...
		*/	
	},
	_onActive(tool){
		let parent = tool.parent || null;
		let sub = tool.sub || null;
		console.log(parent)
		if(parent == this.state.toolActived.parent && sub == null){
			this.setState({toolActived: {parent: null, sub: null}});
		}else{
			this.setState({toolActived: {parent: parent, sub: sub}});
		}
	},
	render(){
		return(
			<div className="home row">
				<section className="left-menu col-xs-12 col-sm-3 col-md-3">
					<Account />
					<Tabs>
						<tab title="工具栏">
							{tools.map((tool)=>{
								return(
									<Tool toolActived={this.state.toolActived} tool={tool} _handleToolsChange={this._handleToolsChange} />
								);
							})}
						</tab>
						<tab title="工作薄">
							<div className="tools-book start-xs">
								<ul className="tools-book-tools center row around-xs" >
									<li className="tools-book-item ">
										<span><i className="small-icon fa fa-file"></i></span>
									</li>
									<li className="tools-book-item ">
										<span><i className="small-icon fa fa-floppy-o"></i></span>
									</li>
									<li className="tools-book-item ">
										<span><i className="small-icon fa fa-undo"></i></span>
									</li>
									<li className="tools-book-item ">
										<span><i className="small-icon fa fa-times-circle"></i></span>
									</li>
								</ul>
								<div className="book">
									<textarea rows={8}>
										记事本
									</textarea>
								</div>
							</div>
						</tab>
					</Tabs>
				</section>
				<section className="drawer col-xs-12 col-sm-7 col-md-7">
					Hello Drawer
				</section>
				<seciton className="right-menu col-xs-12 col-sm-2 col-md-2">
					Hello Right Nav
				</seciton>
			</div>
		);
	}
});

module.exports = Home;